import React from 'react';
import { NavigationContainer, RouteProp } from '@react-navigation/native'
import { createStackNavigator, StackNavigationProp, HeaderStyleInterpolators, CardStyleInterpolators } from '@react-navigation/stack'

import Detail from '@/pages/Detail'
import BottomTabs from './BottomTabs'
import Category from '@/pages/Category'
import { Platform, StatusBar, StyleSheet, Animated } from 'react-native';
import Album from '@/pages/Album';
import Login from '@/pages/Login';
import History from '@/pages/History';
import ProgramDetail from '@/pages/ProgramDetail'

export type RootStackParamList = {
    BottomTabs: {
        screen?: string
    };
    Category: undefined
    Detail: undefined
    Login: undefined
    History: undefined
    ProgramDetail: {
        id: string
    }
    Album: {
        item: {
            id: string;
            title: string;
            image: string;
        };
        opacity?: Animated.Value;
    };
}

export type RootStackNavigation = StackNavigationProp<RootStackParamList>;

let Stack = createStackNavigator<RootStackParamList>();

export type ModalStackParamList = {
    Root: undefined;
    Detail: {
        id: string;
    };
    Login: undefined;
    ProgramDetail: {
        id: string
    }
    History: undefined
};

export type ModalStackNavigation = StackNavigationProp<ModalStackParamList>;

function Navigator() {

    function getAlbumOptions({
        route,
    }: {
        route: RouteProp<RootStackParamList, 'Album'>;
    }) {
        return {
            headerTitle: route.params.item.title,
            headerTransparent: true,
            headerTitleStyle: {
                opacity: route.params.opacity,
            },
            headerBackground: () => {
                return (
                    <Animated.View
                        style={[styles.headerBackground, { opacity: route.params.opacity }]}
                    />
                );
            },
        };
    }

    return <NavigationContainer>
        <Stack.Navigator
            headerMode="float"
            screenOptions={{
                headerTitleAlign: 'center',
                headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
                cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
                gestureEnabled: true,
                gestureDirection: 'horizontal',
                headerStatusBarHeight: StatusBar.currentHeight,
                headerStyle: {
                    ...Platform.select({
                        android: {
                            elevation: 0,
                            borderBottomWidth: StyleSheet.hairlineWidth
                        }
                    })
                }
            }}>
            <Stack.Screen
                name="BottomTabs"
                component={BottomTabs}
            ></Stack.Screen>
            <Stack.Screen
                name="Category"
                component={Category}
                options={{
                    headerTitle: "分类"
                }}
            ></Stack.Screen>
            <Stack.Screen
                options={{
                    headerTitle: "详情"
                }}
                name="Detail"
                component={Detail}
            ></Stack.Screen>
            <Stack.Screen
                options={{
                    headerTitle: "登录"
                }}
                name="Login"
                component={Login}
            ></Stack.Screen>
            <Stack.Screen
                options={{
                    headerTitle: "历史"
                }}
                name="History"
                component={History}
            ></Stack.Screen>
            <Stack.Screen
                options={{
                    headerTitle: "程序详情"
                }}
                name="ProgramDetail"
                component={ProgramDetail}
            ></Stack.Screen>
            <Stack.Screen
                options={getAlbumOptions}
                name="Album"
                component={Album}>
            </Stack.Screen>
        </Stack.Navigator>
    </NavigationContainer>
}

const styles = StyleSheet.create({
    headerBackground: {
        flex: 1,
        backgroundColor: '#fff',
        opacity: 0,
    },
    headerBackImage: {
        marginHorizontal: Platform.OS === 'android' ? 0 : 8,
    },
});

export default Navigator